<template>
<div class="app-container">
  <el-form :model="form" >
    <el-row>
      <div class="demo-input-suffix">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option label="手机号码" value="1"></el-option>
          <el-option label="用户昵称" value="2"></el-option>
        </el-select>
        <el-input v-model="form.tel" placeholder="账号/手机号"></el-input>
        时间类型：
        <el-select v-model="form.tType" placeholder="请选择">
          <el-option label="注册时间" value="1"></el-option>
          <el-option label="上次登陆时间" value="2"></el-option>
        </el-select>
        <el-date-picker
          v-model="form.date1"
          type="datetime"
          placeholder="选择开始时间">
        </el-date-picker>
        <el-date-picker
          v-model="form.date2"
          type="datetime"
          placeholder="选择结束时间">
        </el-date-picker>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </div>
    </el-row>
  </el-form>
  <el-table :data="tableData" id="out-table" style="width: 100%" max-height="600">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
    <el-table-column type="index" width="50" align="center"></el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          v-if="scope.row.order_type !== 4"
          @click="gotoDetail(scope.$index)">详情</el-button>
        <!-- <el-button
          size="mini"
          type="danger">冻结</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
  </div>
</div>
</template>

<script>
  import request from '@/utils/request'
  import { formatDate,toUnix,toDate } from '@/utils/index'
  import { validateOrderStatus,Excel } from '@/utils/validate'
  export function getList(mes) {
    return request({
      url: '/v1/admin/user/list',
      method: 'post',
      data: mes
    })
  }
  export default {
    created:function(){
      const obj = {
        page: 1,
        size: 10,
      }
      this.getList(obj)
    },
    methods: {
      getList(item) {
        getList(item).then(res => {
          if (res.code === 200) {
            console.log(res);
            if (res.data.list.length) {
              this.setTableData = res.data.list
              this.totals = res.data.totalNumber
              res.data.list.filter(item => {
                const val = {
                  tel: item.user_phone,
                  name: item.nickname,
                  // address: item.service_classify_id.classify_name,
                  rTime: item.create_time ? formatDate(new Date(item.create_time*1000), 'yyyy-MM-dd hh:mm') : '',
                  aTime: item.last_login_time ? formatDate(new Date(item.last_login_time*1000), 'yyyy-MM-dd hh:mm') : '',
                  _id: item._id
                }
                this.tableData.push(val)
              })
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      handleSizeChange(val) {
        this.tableData = []
        let obj = {
          size: val,
          page: 1
        }
        this.getList(obj)
        this.size = val
      },
      handleCurrentChange(page) {
        this.tableData = []
        let obj = {
          page: page,
          size: this.size
        }
        this.getList(obj)
      },
      onSubmit() {
        this.tableData = []
        const item = {
          page: 1,
          size: this.size,
          search_type: this.form.type,
          serviceString: this.form.tel,
          search_time_type: this.form.tType,
          search_begin_time : this.form.date1 ? toUnix(toDate(this.form.date1)) : '',
          search_end_time : this.form.date2 ? toUnix(toDate(this.form.date2)) : '',
        }
        this.getList(item)
      },
      exportExcel() {
        Excel('#out-table')
      },
      gotoDetail(index) {
        localStorage.setItem('clientMes', JSON.stringify(this.setTableData[index]))
        this.$router.push({
          path: '/clinetList/clientMes'
        })
      }
    },
    filters: {
      isStart: function(value) {
        if (!value || value == '') return '订单详情'
        return value
      }
    },
    data() {
      return {
        form: {
          type: '',
          tel: '',
          tType: '',
          date1: '',
          date2: ''
        },
        tableList: [
          { name: '手机账号', value: 'tel' },
          { name: '用户昵称', value: 'name' },
          { name: '注册时间', value: 'rTime' },
          { name: '上次登陆时间', value: 'aTime' },
        ],
        tableData: [],
        currentPage: 1,
        size: 10,
        totals: 0,
      }
    }
  }
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
  .el-select{
    width: 160px;
  }
</style>
